<template>
  <div class="ele-content">
    <div class="ele-content-nav" ref="nav_wrapper">
      <ul>
        <li
          v-for="(Item, index) in shopList"
          class="ele-nav-btn"
          :key="index"
          :class="[index === check ? 'ele-nav-check' : 'ele-nav-uncheck']"
          @click="ChangeNav(Item, index)"
        >
          <span class="nav-text">
            <span
              class="ele-nav-icon"
              :class="'ele-nav-icon' + Item.type"
              v-if="Item.type > -1"
            ></span
            >{{ Item.name }}</span
          >
        </li>
      </ul>
    </div>
    <div class="ele-content-menu" ref="wrapper">
      <div class="ele-foods-list">
        <div
          class="ele-foods-item"
          v-for="(Item, index) in shopList"
          ref="title"
         
        >
          <h1 class="ele-foods-title">{{ Item.name }}</h1>
          <div
            class="ele-goods-container"
            v-for="(Single, index) in Item.foods"
             @click="intoDesciption(Single)"
          >
            <ele-goods-item
              :food="Single"
              :scroll="scroll"
              :border="index == Item.foods.length - 1 ? false : true"
            ></ele-goods-item>
          </div>
        </div>
      </div>
    </div>
    <transition name="route">
      <ele-food :food="food" v-show="isShow" @closeWindow="closeWindow"></ele-food>
    </transition>
  </div>
</template>

<script>
// 网络请求 ：商品
import { goods } from "@/config/api";
// 工具 初始化el高度
import {commonUtils} from "@/common/js/utils"
// vuex
import { mapActions } from "vuex";
// 初始化 betterScroll
import { _InitScroll } from "@/common/js/better-scroll";
// 单个商品项 组件
import eleGoodsItem from "../goods_item";
// 商品详情组件
import eleFood from "../food"
export default {
  componentName: "content",
  mixins:[commonUtils],
  data() {
    return {
      // 商品数组
      shopList: [],
      // 左侧nav 初始化值
      check: 0,
      // betterScroll配置
      betterscrollConfig: {
        pullUpLoad: true,
        scrollbar: false,
        pullDownRefresh: true,
        startY: 10,
        click:true
      },
      // betterScroll 实例
      scroll: {},
      // title数组高度
      offsetTop: [],
      // 点击后‘锁’ 住 滚动商品栏，禁止滚动
      lock: false,
      // 倒计时
      timer: null,
      // 商品对象，传入food组件
      food:{},
      // 是否显示 商品详情页
      isShow:false
    };
  },
  methods: {
    // 关闭 商品详情 页
    closeWindow(){
      this.isShow =false
    },
    // 点击改变nav颜色
    ChangeNav(Item, index) {
      let { scroll,$refs } = this;
      // 点击后 选中样式
      this.check = index;
      // 开锁，禁止调用滚动回调
      this.lock = true;
      // 滚动到指定el
      this._ScrollElement($refs.title[index],300)
      // 防抖
      if (this.timer != null) {
          clearTimeout(this.timer);
          this.timer = null;
      }
      this.timer = setTimeout(() => {
        this.lock = false;
      }, 1000);
    },
    // 设置wrapper元素的高度
    wrapperHeight() {
      let { wrapper,nav_wrapper } = this.$refs;
      // 设置高度
     this.__InitWrapper(wrapper)
     this.__InitWrapper(nav_wrapper)
    },
    // betterScroll滚动回调
    HandlerScroll(position) {
      if (this.lock) return;
      let { offsetTop } = this;
      let { x, y } = position;
      // 坐标数组
      if (offsetTop.length <= 0) return;
      let index = 0;
      offsetTop.forEach((Item, i) => {
        if (Item <= -y) {
          index = i;
        }
      });
      this.check = index;
    },
    // 详情页操作入口
    intoDesciption(Item){
        this.food = Item
        this.isShow = true
    },
        // 初始化 BetterScroll
    _InitScroll() {
      this.wrapperHeight();
      // nav导航
      new _InitScroll(this.$refs.nav_wrapper)
      this.scroll = new _InitScroll(
        this.$refs.wrapper,
        this.betterscrollConfig
      );
      this.scroll.scroll(this.HandlerScroll);
    },
    // _滚动到某个元素
    _ScrollElement(ele,duration){
        this.scroll.scrollToElement(ele, duration);
    }
    ,
    // 初始化 标题距离顶部的高度
    _InitTitleHeight() {
      this.offsetTop = [];
      // 计算每一个菜单容器的高度
      // 得出offsetTop
      this.$refs.title.reduce((pre, total) => {
        this.offsetTop.push(pre);
        return pre + total.clientHeight;
      }, 0);
    },
  },
  created() {
    // 发送商品网络请求
    goods().then((res) => {
      let { data } = res;
      // 初始化商品请求
      this.shopList = data;
    });
  },
  mounted() {
    // betterScroll 初始化
    this._InitScroll();
  },
  updated() {
    // 初始化Wrapper高度
    this._InitTitleHeight();
  },
  components: {
    // 单个商品项
    eleGoodsItem,
    // 商品详情页
    eleFood
  },
};
</script>

<style>
.ele-content {
  display: flex;
  /* justify-content: space-between; */
}

.ele-content-nav {
  background-color: #f3f5f7;
  flex: 0 0 80px;
  overflow: hidden;
}
.ele-nav-btn {
  width: 80px;
  height: 54px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  position: relative;
}

.ele-nav-check {
  background-color: rgba(255, 255, 255, 1);
}

.ele-nav-uncheck::after {
  content: "";
  height: 1px;
  width: 56px;
  position: absolute;
  left: 50%;
  bottom: 0px;
  background-color: rgba(7, 17, 27, 0.1);
  transform: translateX(-50%) scaleY(0.9);
}
.ele-nav-btn .nav-text {
  font-size: 12px;
  color: rgb(29, 27, 27);
  font-weight: 200;
  line-height: 14px;
}

.ele-nav-icon {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 2px;
  vertical-align: top;
  background-size: cover;
}

.ele-nav-content {
  flex: 1;
}

.ele-content-menu {
  overflow: hidden;
  position: relative;
  flex: 1;
}
.ele-foods-list {
  padding-bottom: 48px;
}
.ele-foods-title {
  font-size: 12px;
  line-height: 26px;
  height: 26px;
  color: rgb(147, 153, 159);
  background-color: #f3f5f7;
  border-left: 2px solid #d9dde1;
  padding-left: 14px;
}

.route-enter-active,.route-leave-active{
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);;
}

.route-enter{
      transform: translateX(100%);
      opacity: 0;
}
.route-leave-to{
   transform: translateX(-100%);
   opacity: 0;
}
.ele-nav-icon0 {
  background-image: url("../../assets/img/decrease_3@2x.png");
}
.ele-nav-icon1 {
  background-image: url("../../assets/img/discount_3@2x.png");
}
.ele-nav-icon2 {
  background-image: url("../../assets/img/special_3@2x.png");
}
.ele-nav-icon3 {
  background-image: url("../../assets/img/invoice_3@2x.png");
}
.ele-nav-icon4 {
  background-image: url("../../assets/img/guarantee_3@2x.png");
}
</style>
